import Image from 'next/image'
import { Button } from "@/components/ui/button"

export default function Page() {
  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="flex items-center justify-between px-6 py-4 border-b">
        <div className="flex items-center gap-8">
          <Image
            src="/placeholder.svg"
            alt="SPOTTER"
            width={120}
            height={32}
            className="h-8 w-auto"
          />
          <nav className="hidden md:flex items-center gap-6">
            <a href="#" className="text-gray-600 hover:text-gray-900">解决方案</a>
            <a href="#" className="text-gray-600 hover:text-gray-900">入驻指南</a>
            <a href="#" className="text-gray-600 hover:text-gray-900">关于我们</a>
          </nav>
        </div>
        <div className="flex items-center gap-4">
          <Button variant="ghost">登录</Button>
          <Button>联系我们</Button>
        </div>
      </header>

      {/* Hero Section */}
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-50 to-blue-100">
          <div className="absolute inset-0" style={{
            backgroundImage: "url('/placeholder.svg')",
            backgroundSize: 'cover',
            opacity: 0.1
          }} />
        </div>
        <div className="relative max-w-7xl mx-auto px-6 py-24 md:py-32">
          <div className="max-w-3xl">
            <h1 className="text-4xl md:text-5xl font-bold mb-6">
              携手 <span className="text-blue-600">SPOTTER</span>
              <br />
              入驻全球自营渠道
            </h1>
            <p className="text-lg text-gray-600 mb-8">
              SPOTTER 致力于全球市场的 B2B 跨境贸易分销，通过数字化能力精准赋能卖家品牌布局海外渠道，帮助品牌商出海提速。
            </p>
            <div className="flex gap-4">
              <Button size="lg">联系我们</Button>
              <Button variant="outline" size="lg">立即入驻</Button>
            </div>
          </div>
        </div>
      </div>

      {/* Features Section */}
      <div className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <h2 className="text-3xl font-bold text-center mb-16">
            6 大优势造就 SPOTTER 独树一帜
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div key={index} className="bg-gray-50 rounded-lg p-6">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                  {feature.icon}
                </div>
                <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
                <p className="text-gray-600">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

const features = [
  {
    icon: <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>,
    title: "零门槛接入多渠道",
    description: "轻松链接 Amazon, Walmart 等平台的优质渠道，无式填接入出海多渠道。"
  },
  {
    icon: <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>,
    title: "智慧供应链闭环管理",
    description: "自研智慧供应链平台，提供跨境贸易智慧供应链链解决方案。"
  },
  {
    icon: <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>,
    title: "Amazon 运营专家团队",
    description: "7 年亚马逊运营经验，专业咨询团队为您保驾护航。"
  }
]

